/**
 * 学习目标：什么是Hooks
 * 作用：为 函数组件 提供状态、生命周期等
 * 为什么要用hooks：
 * 1. 组件的状态逻辑复用 (有兴趣自行了解)
 * 2. class 组件自身的问题(class 较难，this指向不明确，业务代码不好维护等)
 * 怎么使用 hooks - useState
 * 1. 引进和调用 useState(初始值)
 * 2. 返回的是一个数组，
 *    数组第一位是 定义的状态
 *    数组第一位是 改变状态的方法，注意调用直接传值即可
 *      ✅ setCount(200)
 *      ❌ setCount({ count: 200})
 */
import React, { useState } from 'react';

function App() {
  // 第一位等同于 class 中定义了 count
  // state = {
  //   count: 100
  // }
  // 第二位，setCount,等同于 setState({ count: })
  // setCount(count + 1) ===> setState({ count: count + 1})
  const [count, setCount] = useState(100);
  // console.log('arr -----> ', count, setCount);
  return (
    <>
      我是App - {count}
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点我修改 count{' '}
      </button>
    </>
  );
}
export default App;
